<template>
	<view class="question-page">
		<!-- #ifdef APP -->
		<u-navbar style="font-size: 34rpx;" title="反馈与建议" :autoBack="true" :placeholder="true">></u-navbar>
		<!-- #endif -->
		<view class="contentBox">
			<view class="content-box">
				<view class="title">意见反馈 <text style="font-size: 24rpx;">（必填）</text></view>
				<view style="flex: 1;">
					<u-textarea class="custom-textarea" count maxlength="200" v-model="content"
						placeholder="请输入详细的反馈意见，以便我们改进，更好的为您服务~" placeholder-style="font-size:26rpx;line-height:1.5;"  :clearable="true" border="none" confirmType="done"
						style="font-size: 26rpx;padding: 24rpx 36rpx 0rpx 36rpx; height: 518rpx;" autoHeight></u-textarea>
				</view>
			</view>
			<view class="image-box">
				<view class="title">问题截图<text style="font-size: 24rpx;">（选填）</text></view>
				<view style="flex: 1;">
					<uploadImage @uploadSuccess='uploadSuccess' name="image" :maxCount='6' width="208rpx" height="208rpx">
					</uploadImage>
				</view>
			</view>
			<view class="button-group">
				<view class="button1" @click="$u.throttle(submitFeedBack,2000)">提交</view>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	import uploadImage from '@/components/UploadImage.vue';
	export default {
		data() {
			return {
				content: '',
				images: ''
			}
		},
		components: {
			uploadImage: uploadImage
		},
		onLoad(options) {

		},
		methods: {
			submitFeedBack() {
				this.$Api['user'].submitFeedBack({
					content: this.content,
					images: this.images,
				}).then(res => {
					this.$Tips({
						title: '提交成功'
					}, {
						tab: 3,
						url: '1'
					})
				})
			},
			uploadSuccess(e) {
				this.images = e.fileList
			}
		}
	}
</script>

<style lang="less" scoped>
	.question-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f8fa;
		position: relative;

		.contentBox {
			min-height: 80vh;
			margin: 20rpx 34rpx;
			padding: 38rpx 40rpx 38rpx;
			box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
			border-radius: 32rpx;
			background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 5%);


			.image-box {
				margin-top: 40rpx;

				.title {
					font-size: 28rpx;
					margin: 42rpx 0 20rpx;
				}
			}

			.content-box {
				.title {
					font-size: 28rpx;
				}
				.custom-textarea {
					margin-top: 20rpx;
					background-color: #F7F7F7;
					border-radius: 16rpx;

					::v-deep .u-textarea__count {
						background-color: #F7F7F7 !important;
					}

					::v-deep .u-textarea__field {
						min-height: 100px;
					}
				}
			}

			.button-group {
				.button1 {
					margin: 160rpx auto 132rpx;
					width: 628rpx;
					height: 88rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
					background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
					box-shadow: 0rpx 4rpx 10rpx 0rpx #FDC4FF;
					border-radius: 44rpx;
				}
			}
		}
	}
</style>